<!--
 * @Author: 471826078@qq.com
 * @Date: 2020-12-24 15:37:46
 * @LastEditors: younghxp
-->
<template>
  <div class="div">
    <query-compment :activeName="activeName" @callback="callbackSearch" />
    <div class="tableBox">
      <el-row class="tableBoxTip">
        <el-col :span="18" v-if="activeName == 'first'"
          >查询内容：所选M个月内，落实了N次代发工资的项目（9月份发7月份的工资，代表7月份落实了代发）</el-col
        >
        <el-col :span="6" style="text-align: right">
          <colSetup
            :tableColList="colSetupTableCol"
            @getSelectMenuId="getSelectMenuIds"
          />
          <el-button
            class="commonBut saveBtn funComBut"
            icon="icon iconfont icondaochu"
            @click="toExportExcel"
            style="margin-left: 10px"
          >
            <span class="opetareText">导出报表</span>
          </el-button>
        </el-col>
      </el-row>
      <el-table
        ref="table"
        :data="tableList"
        v-loading="loading"
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        highlight-current-row
        stripe
        @sort-change="sortChange"
        style="border: 1px solid #dfe6ec"
        :max-height="tableHeight"
      >
        <my-column
          v-for="(item, index) in tableColOne"
          :key="index"
          :sortable="
            ['startDate', 'createTime', 'cycle', 'endDate', 'total'].includes(
              item.prop
            )
              ? 'custom'
              : false
          "
          :col="item"
        ></my-column>
      </el-table>
    </div>
    <div class="tablePage">
      <Pagination
        ref="pagination"
        @getList="getTableList"
        :filterField="filterField"
        :requestUrl="requestUrl"
      ></Pagination>
    </div>
    <el-dialog
      title="正在生成数据，请稍后"
      :visible.sync="dialogVisible"
      width="400px"
      :close-on-click-modal="false"
      :show-close="false"
      class="loadData"
    >
      <el-progress
        :percentage="percentage"
        :color="customColor"
        :show-text="false"
      ></el-progress>
    </el-dialog>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
import queryCompment from './queryCompment.vue'
import MyColumn from './MyColumn'
import common from '../../kits/common'
import otherSystem from '../../router/otherSystem'
// import { delete } from 'vue/types/umd';

export default {
  components: { queryCompment, MyColumn },
  name: 'customQueryMonths',
  data() {
    return {
      tableHeight: null,
      dialogVisible: false,
      percentage: 0,
      startPro: 0,
      activeName: 'first',
      requestUrl: '/api-s/cs/cqstats/base/issue',
      filterField: {
        areaId: '',
        industryId: '',
        investment: '',
        totalStart: '',
        totalEnd: '',
        archiveDateStart: '',
        archiveDateEnd: '',
        beginDateStart: '',
        beginDateEnd: '',
        status: 'STARTED',
        monthsStart: '',
        monthsEnd: '',
        issueSymbol: '=',
        count: '1',
        year: '',
        months: '',
      },
      tableList: [],
      colSetupTableCol: [],
      tableCol: [],
      tableColOne: [],
      selectProps: [],
      mark: 'projectDetailReport',
    }
  },
  created() {
    let curMonth = new Date().getMonth() + 1
    let curYear = new Date().getFullYear()
    let newDate = ''
    if (curMonth == 1) {
      newDate = curYear - 1 + '-' + 11
    } else if (curMonth == 2) {
      newDate = curYear - 1 + '-' + 12
    } else {
      newDate = curYear + '-' + (curMonth - 2)
    }
    this.filterField.monthsStart = newDate
    this.filterField.monthsEnd = newDate
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
      this.getTableHeaderF()
    })
  },
  mounted() {
    this.loading = true
    this.$nextTick(function () {
      this.tableHeight = window.innerHeight - 300
      // 监听窗口大小变化
      let self = this
      window.onresize = function () {
        self.tableHeight = window.innerHeight - 300
      }
    })
  },
  methods: {
    /**
     * @description: 获取选中的列
     */
    getSelectMenuIds(val, allVal) {
      this.$nextTick(() => {
        this.tableColOne = []
        val.forEach((item) => {
          this.tableColOne.push(...item.children)
        })
        this.$refs.table.doLayout()
      })
    },

    callbackSearch(val) {
      // 处理工程造价
      let data = JSON.parse(JSON.stringify(val))
      data.totalStart =
        val.totalStart * 10000 == 0 ? '' : val.totalStart * 10000
      data.totalEnd = val.totalEnd * 10000 == 0 ? '' : val.totalEnd * 10000
      this.filterField = data
      this.dialogVisible = true
      this.percentage = 0
      let that = this
      this.startPro = setInterval(function () {
        that.percentage += 30
        if (that.percentage > 70) {
          clearInterval(that.startPro)
          that.$nextTick(function () {
            that.$refs.pagination.getTableListData()
          })
        }
      }, 50)
    },
    getTableList(data) {
      this.percentage = 100
      let that = this
      setTimeout(function () {
        that.dialogVisible = false
      }, 200)
      this.tableList = data
      this.$refs.table.doLayout()
      this.loading = false
      if (this.tableList.length < 1) {
        this.isEmpty = true
      }
    },
    //获取表头
    getTableHeaderF() {
      this.axios
        .post('/api-s/dimension/head', { type: 'ISSUE_MONTHS', complex: 1 })
        .then((res) => {
          if (!res.data.hasError) {
            let datas = JSON.parse(JSON.stringify(res.data.result))
            datas.forEach((item) => {
              item.isShow = false
              item.children.forEach((m) => {
                if (m.label == '项目名称') {
                  m.disabled = true
                }
              })
            })
            this.tableCol = datas
            this.tableColOne = []
            this.tableCol.forEach((item) => {
              this.tableColOne.push(...item.children)
            })
            this.colSetupTableCol = datas
          }
        })
    },
    //导出报表
    toExportExcel() {
      if (this.tableList.length == 0) {
        this.$message({
          type: 'warning',
          message: '无数据可导出',
        })
        return false
      }
      let arrval = []
      for (var i = 0; i < this.tableColOne.length; i++) {
        if (this.tableColOne[i].isShow == true) {
          arrval.push(this.tableColOne[i].prop)
        }
      }
      window.location.href =
        common.commonApi +
        'api-s/cs/cqstats/base/issueexport?pageNo=1&pageSize=10000' +
        '&areaId=' +
        this.filterField.areaId +
        '&industryId=' +
        this.filterField.industryId +
        '&investment=' +
        this.filterField.investment +
        '&totalStart=' +
        this.filterField.totalStart +
        '&totalEnd=' +
        this.filterField.totalEnd +
        '&beginDateStart=' +
        this.filterField.beginDateStart +
        '&beginDateEnd=' +
        this.filterField.beginDateEnd +
        '&archiveDateStart=' +
        this.filterField.archiveDateStart +
        '&archiveDateEnd=' +
        this.filterField.archiveDateEnd +
        '&status=' +
        this.filterField.status +
        '&monthsStart=' +
        this.filterField.monthsStart +
        '&monthsEnd=' +
        this.filterField.monthsEnd +
        '&count=' +
        this.filterField.count +
        '&issueSymbol=' +
        this.filterField.issueSymbol +
        '&sort=' +
        this.filterField.sort +
        '&sortField=' +
        this.filterField.sortField +
        '&fields=' +
        arrval.join(',') +
        '&access_token=' +
        localStorage.getItem('access_token')
    },
  },
}
</script>
<style lang="less" scoped>
.mainCon {
  padding: 0;
  top: 130px;
}

.tableBox {
  padding: 0 24px;

  &Tip {
    height: 68px;
    line-height: 36px;
    font-size: 14px;
    color: #666;
    padding: 16px 0;
    .el-col {
      height: 36px;
      line-height: 36px;
    }
    .colSetupBtn {
      display: inline-block;
      vertical-align: top;
    }
  }
}
.tablePage {
  padding: 0 24px;
}
</style>
